<template>
  <div id="status-edit" style="height: calc(100% - 40px)">
    <CustomTabs v-if="showTab" class="pl-[24px]" :tabList="tabList" :activeName="activeName" @tabSelect="handelTabSelected" />
    <RuleDesc v-if="activeName === 'desc'" />
    <RuleSetting v-else-if="activeName === 'setting'" @toggle="toggle" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

import CustomTabs from "@/components/Tabs/index.vue";

import type { ITabItem, TabType } from "./type";
import RuleDesc from "./components/RuleDesc/index.vue";
import RuleSetting from "./components/RuleSetting/index.vue";

const tabList: ITabItem[] = [
  {
    name: "desc",
    label: "状态规则说明"
  },
  {
    name: "setting",
    label: "状态规则设置"
  }
];

const activeName = ref<TabType>("desc");
const showTab = ref(true);

const handelTabSelected = (selectName: TabType) => {
  activeName.value = selectName;
};

const toggle = val => {
  showTab.value = val;
};
</script>

<style lang="scss" scoped></style>
